<template>
<div class="button" @click="toNext"   >
    <p class="bottomTitle"    style="color: white"> 
      	持仓盈亏&nbsp;<span :class="color(data.totalProfit)">{{data.totalProfit}}</span>
    </p>
</div>
</template>

<script>
export default {
  	props:['itemdata'],
  	data(){
		return{
			data:"",
		}
	},
  	methods:{
      toNext(){
          this.$emit('toNext')
      },
      color(num){
      		//console.log(num);
	    	if(num<0){
	    		 return "green";
	    	}else if(num>0){
	    		 return "red";
	    	}else if(num== null){
	    		return "gray"
	    		
	    	}
	    },
  	},
  	watch:{
        itemdata(value){
            this.data = value;
            //console.log(this.data.totalProfit);
        }
    }
}
</script>

<style lang="less" scoped>
@import '../less/config.less';
.button{
    width: 100%;
    text-align: center;
    font-size:.48rem;
    position: absolute;
    background: #141723;
    height: 1.173rem;
    line-height: 1.173rem;
    bottom: 0;
    background: #l41723;
    span{
    	color: #FF335B;
    }
    .green{
	  	color: #33ffc3;
	}
}

</style>
